<template>

  <div>
    <div style="margin: 20px 0;text-align: left">
      <span style="font-size: 20px;font-weight: 650">学习分析</span>
      <span style="font-size: 14px;margin-left: 20px;color: rgba(0, 0, 0, 0.447)">最近七天 </span>
    </div>




    <el-card>
      <p style="text-align: left">各类型学习时长趋势</p>
      <div class="echart" id="mychart" :style="myChartStyle"></div>
    </el-card>


    <el-card style="margin-top: 20px">
      <p style="text-align: left">每天学习人数统计</p>
      <div class="echart" id="twochart" :style="myChartStyle"></div>
    </el-card>

    <div style="margin-top: 20px">
      <el-row :gutter="12">
        <el-col :span="12">
          <el-card >
            <div slot="header" class="clearfix" style="text-align: left">
              <span>销售量TOP5课程</span>
            </div>

            <el-table
                :data="courseList"
                style="width: 100%">
              <el-table-column
                  type="index"
                  label="排名">
              </el-table-column>

              <el-table-column
                  prop="coursecover"
                  label="课程图片">
                <template slot-scope="scope">
                  <img :src="nginxUrl+scope.row.coursecover" style="height: 50px; width: 50px;border-radius: 50%">
                </template>
              </el-table-column>

              <el-table-column
                  prop="coursename"
                  label="课程名称">
              </el-table-column>

              <el-table-column
                  prop="saleCounts"
                  label="销售量">
              </el-table-column>
            </el-table>


          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card >
            <div slot="header" class="clearfix" style="text-align: left">
              <span>付费学习人数占比</span>
            </div>

            <div class="echart" id="threechart" :style="myChartStyle"></div>

          </el-card>

        </el-col>

      </el-row>
    </div>

  </div>



</template>
<script>
    export default {
        data() {
            return {
              nginxUrl:this.$MyUrl.imgUrl + "course/",
              courseList:'',
              myChart: {},
              xData: [], //横坐标
              y1Data: [], //人数数据
              y2Data: [], //人数数据
              y3Data: [], //人数数据
              myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式

              twoChart:{},
              x1Data: [], //横坐标
              y4Data: [], //人数数据

              threeChart:{},
              freeNum:'',
              svipNum:'',
              totalNum:'',
              freeH:'',
              svipH:''
            };
        },
        mounted() {
          this.initEcharts();
          this.initTwoEcharts();
          this.initThreeEcharts()
        },
        methods: {
          initUserTotal(){
            let url = "study/queryTotal"
            this.$axios.get(url)
                .then(res=>{

                  if (res.data.code == 101){
                    this.totalNum = res.data.data
                    this.freeNum = this.totalNum - this.svipNum

                    this.initThreeEcharts()
                  }else{
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                })
          },
          initUserSvip(){
            let url = "study/querySvip"
            this.$axios.get(url)
                .then(res=>{
                  if (res.data.code == 101){
                    this.svipNum = res.data.data
                    this.freeNum = this.totalNum - this.svipNum
                    this.initThreeEcharts()
                  }else{
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }


                })
          },
          initCourse(){
            let url = "data/queryCourseTop"
            this.$axios.get(url)
                .then(res=>{
                  if (res.data.code==101){
                    this.courseList = res.data.data
                  }else{
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                })
          },
          initSum(){
            let url = "study/querySum"
            this.$axios.get(url).then(res=>{
              if (res.data.code == 200){
                let c =  res.data.data
                for (let d = c.length - 1;d>0;d--){
                  this.y4Data.push(c[d].studyNum)
                  this.x1Data.push(c[d].finalTime.substring(5,10))

                }
                this.initTwoEcharts();
              }else{
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000

                })
              }
            })
          },
          initCourseOne(){
            let url = "study/queryEach"
            this.$axios.get(url,{
              params:{
                courseType:1
              }
            }).then(res=>{
              if (res.data.code == 200){
                let c =  res.data.data
                for (let d = c.length - 1;d>0;d--){
                  this.y1Data.push(c[d].duration)
                  this.xData.push(c[d].finalTime.substring(5,10))

                }
                this.initEcharts();
              }else{
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000

                })
              }
            })
          },
          initCourseTwo(){
            let url = "study/queryEach"
            this.$axios.get(url,{
              params:{
                courseType:2
              }
            }).then(res=>{
              if (res.data.code == 200){
                let c =  res.data.data
                for (let d = c.length - 1;d>0;d--){
                  this.y2Data.push(c[d].duration)
                }
                this.initEcharts();
              }else{
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000

                })
              }
            })
          },
          initCourseThree(){
            let url = "study/queryEach"
            this.$axios.get(url,{
              params:{
                courseType:3
              }
            }).then(res=>{
              if (res.data.code == 200){
                let c =  res.data.data
                for (let d = c.length - 1;d>0;d--){
                  this.y3Data.push(c[d].duration)
                }
                this.initEcharts();
              }else{
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000

                })
              }
            })
          },


          initEcharts() {
            const option = {
              xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.xData
              },
              yAxis: {},
              color:["blue","green","orange"],
              legend:{
                data:[{name:"图文课程", icon: "circle"}, {name:"音频课程", icon: "circle"}, {name:"视频课程", icon: "circle"}],
                top:"0%",
                right:"0%"
              },
              series: [
                {
                  name:"图文课程",
                  data: this.y1Data,
                  type: "line" ,// 类型设置为折线图,
                  smooth: true,
                  showSymbol: false,
                  lineStyle: {
                    normal: {
                      color: 'blue',
                      width: 4,

                    }
                  }
                },
                {
                  name:"音频课程",
                  data: this.y2Data,
                  type: "line" ,// 类型设置为折线图
                  smooth: true,
                  showSymbol: false,
                  lineStyle: {
                    normal: {
                      color: 'green',
                      width: 4,

                    }
                  }
                },
                {
                  name:"视频课程",
                  data: this.y3Data,
                  type: "line" ,// 类型设置为折线图
                  smooth: true,
                  showSymbol: false,
                  lineStyle: {
                    normal: {
                      color: 'orange',
                      width: 4,

                    }
                  }
                }
              ]
            };
            this.myChart = this.$echarts.init(document.getElementById("mychart"));
            this.myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
              this.myChart.resize();
            });
          },
          initTwoEcharts() {
            const option = {
              xAxis: {
                type: 'category',
                data: this.x1Data
              },
              yAxis: {},
              series: [
                {
                  name:"图文课程",
                  data: this.y4Data,
                  type: "bar" ,// 类型设置为折线图,
                  smooth: true,
                  showSymbol: false,

                },

              ]
            };
            this.twoChart = this.$echarts.init(document.getElementById("twochart"));
            this.twoChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
              this.twoChart.resize();
            });
          },
          initThreeEcharts() {
            const option = {
              tooltip: {
                trigger: 'item'
              },
              legend: {
                top: '5%',
                left: 'center'
              },

              series: [

                {

                  type: 'pie',
                  radius: ['40%', '70%'],
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    label: {
                      show: true,
                      fontSize: '40',
                      fontWeight: 'bold'
                    }
                  },
                  labelLine: {
                    show: false
                  },
                  data: [
                    { value: this.freeNum, name: '免费用户' },
                    { value: this.svipNum, name: '付费用户' },

                  ]
                }
              ]
            };
            this.threeChart = this.$echarts.init(document.getElementById("threechart"));
            this.threeChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
              this.threeChart.resize();
            });
          },
          reload(){
            this.initCourseOne();
            this.initCourseTwo();
            this.initCourseThree();
            this.initSum();
            this.initCourse();
            this.initUserTotal();
            this.initUserSvip()
          }
        },
        created() {
          this.reload()
        }
    };
</script>
<style lang="less" scoped>
</style>